<template>
  <div class="review-card">
    <!-- 头像（可替换为表情等）区域，接收传入的头像地址 -->
    <div class="avatar-circle">
      <img :src="avatarUrl" :alt="avatarAlt" class="avatar">
    </div>
    <!-- 星星和文本内容区域 -->
    <div class="content-wrapper">
      <div class="stars">
        <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
      </div>
      <p class="text">{{ text }}</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ReviewCard',
    // 定义需要从外部传入的属性
    props: {
      // 头像（或表情）图片地址
      avatarUrl: {
        type: String,
        required: true
      },
      // 头像 alt 文本
      avatarAlt: {
        type: String,
        default: 'avatar'
      },
      // 评价文本内容，如 "Value for money, worth every cent."
      text: {
        type: String,
        required: true
      }
    }
  }
</script>

<style scoped>
  .review-card {
    display: flex;
    align-items: center;
    background-color: #b9f6ca; /* 浅绿色背景 */
    border-radius: 12px; /* 整体圆角 */
    padding: 12px 16px;
    font-family: Arial, sans-serif;
  }

  .avatar-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #fff; /* 白色边框 */
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-right: 16px;

    /* 核心规则：限制最大宽高，不超过容器 */
    max-width: 100%;
    max-height: 100%;

    /* 保持图片比例，避免拉伸变形 */
    object-fit: contain; /* 优先完整显示图片，可能留空白 */
    /* 或使用 object-fit: cover; 填充容器（可能裁剪部分图片） */
  }

  .avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
  }

  .content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .stars {
    color: #ffeb3b; /* 星星颜色 */
    font-size: 16px;
    margin-bottom: 4px;
  }

  .text {
    font-size: 18px;
    color: #000;
    margin: 0;
    line-height: 1.4;
  }

</style>
